<template>
  <div class="index">
    <div class="top menu">
      <ul class="ul">
        <li>
          <router-link to="/home" active-class="active">首页</router-link>
        </li>
        <li>
          <router-link to="/news" active-class="active">扶贫新闻</router-link>
        </li>
        <li>
          <router-link to="/shop" active-class="active">扶贫商品</router-link>
        </li>
        <li>
          <router-link to="/support" active-class="active"
            >扶贫资助</router-link
          >
        </li>
        <li v-if="userID != '' && userID != null">
          <router-link to="/personal" active-class="active"
            >个人中心</router-link
          >
        </li>
        <li></li>
      </ul>
      <div class="" v-if="userID == '' || userID == null">
        <el-tag @click="logindialog = true">登录</el-tag>
        <el-tag type="success" @click="regdialog = true">注册</el-tag>
      </div>
      <div class="quit" v-else>
        <el-dropdown
          placement="bottom"
          @command="handleCommand"
          style="margin-left: 20px"
        >
          <span class="el-dropdown-link">
            {{ username }}
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="modify">修改密码</el-dropdown-item>
            <el-dropdown-item command="quit">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <router-view></router-view>
    <div class="bottoms">
      <div class="bottom1">Copyright © 2022 All rights reserved.</div>
      <div class="bottom2">备案号：鲁ICP备</div>
    </div>
    <el-dialog
      title="登录"
      :visible.sync="logindialog"
      width="30%"
      v-if="logindialog"
    >
      <login></login>
    </el-dialog>
    <el-dialog
      title="注册"
      :visible.sync="regdialog"
      width="30%"
      v-if="regdialog"
    >
      <reg></reg>
    </el-dialog>
    <el-dialog title="修改密码" :visible.sync="Visible" v-if="Visible">
      <el-form>
        <el-form-item label="新密码">
          <el-input v-model="password" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="Change">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import login from "./components/login.vue";
import reg from "./components/reg.vue";
export default {
  components: {
    login,
    reg,
  },
  data() {
    return {
      userID: "",
      username: "",
      logindialog: false,
      regdialog: false,
      Visible: false,
      password: "",
    };
  },
  mounted() {
    this.userID = sessionStorage.getItem("bfid");
    this.username = sessionStorage.getItem("bfname");
  },
  created() {
    let that = this;
    that.$bus.$on("closed", function (data) {
      console.log(data);
      if (data == 1) {
        that.userID = sessionStorage.getItem("bfid");
        that.username = sessionStorage.getItem("bfname");
        that.logindialog = false;
      } else {
        that.regdialog = false;
      }
    });
    that.userID = sessionStorage.getItem("bfid");
    that.username = sessionStorage.getItem("bfname");
  },
  methods: {
    cancel() {
      this.Visible = false;
      this.password = "";
    },
    Change() {
      this.$http
        .postRequest("main/user/edit", {
          id: sessionStorage.getItem("bfid"),
          password: this.password,
        })
        .then((res) => {
          this.$message(res.msg);
          if (res.code == 0) {
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    handleCommand(command) {
      switch (command) {
        case "modify":
          this.Visible = true;
          break;
        case "quit":
          this.$confirm("您确定要退出登录吗？", "温馨提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              sessionStorage.removeItem("bfname");
              sessionStorage.removeItem("bfid");
              this.userID = "";
              this.username = "";
            })
            .catch(() => {});
          break;
      }
    },
  },
  beforeDestroy() {
    this.$bus.$off("closed");
  },
};
</script>

<style scoped>
.index {
  margin-top: 20px;
}

.top {
  width: 100%;
  padding: 20px 0;
  /* text-align: center; */
  display: flex;
  justify-content: center;
  align-items: center;
}

.ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}

.ul,
li,
a {
  text-decoration: none;
  color: #999999;
}

.ul {
  display: flex;
}

li {
  padding: 0 30px;
}

.active {
  color: #66b1ff;
  font-weight: bold;
}

.el-tag {
  margin-left: 10px;
}

.bottoms {
  width: 100%;
  text-align: center;
  cursor: pointer;
  padding: 30px 0;
  background-color: #000000;
  font-size: 14px;
}

.bottom1 {
  color: #aeaeae;
}

.bottom2 {
  margin-top: 10px;
  color: #fff;
}

::v-deep.pagination {
  margin: 20px;
}
</style>
